<template>
    <div class="control">
        <div class="video-play">
            <div>
                <i
                    @click="playOrPause"
                    :class="
                        !obj.videoList[obj.videoSelected]?.playStatus
                            ? 'el-icon-video-play'
                            : 'el-icon-video-pause'
                    "
                >
                </i>
                <i
                    style="margin: 0 10px"
                    @click="fullScreen"
                    class="el-icon-full-screen"
                >
                </i>
            </div>
            {{ info && "时长:" + info?.duration + " 比特率:" + info?.bitRate }}
            <div class="mx-1" style="user-select: none"
                >{{
                    formatTime(
                        obj.videoList[obj.videoSelected]?.currentSecond || 0
                    )
                }}
                /
                {{
                    formatTime(obj.videoList[obj.videoSelected]?.duration || 0)
                }}</div
            >
        </div>
        <el-divider style="margin: 5px 0" />
        <ControlBtns
            @downloadVideo="downloadVideo"
            @postVideo="postVideo"
            @selectVideo="selectVideo"
            @upLoadFont="upLoadFont"
            @upLoadImage="upLoadImage"
            @upLoadSubTitle="upLoadSubTitle"
            :obj="obj"
        ></ControlBtns>

        <PostDialog
            v-if="postDialog.show"
            :data="postDialog.data"
            @close="postDialog.show = false"
        ></PostDialog>

        <input type="file" v-show="false" ref="videoInput" :accept="accept" />

        <el-divider style="margin: 5px 0" />
        <div class="h-c-list">
            视频：<VideoListComponent
                :obj="obj"
                @switch="changeVideo"
                @remove="removeVideo"
                style="height: 90px; flex: 1"
            ></VideoListComponent>
        </div>
        <div class="h-c-list">
            字体：
            <div class="font-list h-list">
                <el-tag
                    v-for="(item, index) of obj.fontList"
                    :key="index"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index)"
                >
                    {{ item }}</el-tag
                >
            </div>
        </div>
    </div>
</template>

<script>
import {
    initVideo,
    writeFontFile,
    writeImage,
    getFirstFrame,
    writeSubTitle,
    urlGetData,
} from "@/module/useFfmpeg";
import VideoListComponent from "./VideoListComponent.vue";
import { formatTime } from "@/utils/string";
import PostDialog from "./PostDialog.vue";
import ControlBtns from "./ControlBtns.vue";
export default {
    props: ["obj"],
    components: {
        VideoListComponent,
        PostDialog,
        ControlBtns,
    },
    computed: {
        info() {
            return JSON.parse(
                this.obj.videoList[this.obj.videoSelected]?.videoInfo || "null"
            );
        },
    },
    data() {
        return {
            postDialog: {
                show: false,
                data: {},
            },
            accept: ".mp4",
            video: null,
        };
    },
    mounted() {
        this.$refs.videoInput?.addEventListener("change", this.uploadVideo);
        this.video = document.getElementById("video");
    },
    beforeDestroy() {
        this.$refs.videoInput.removeEventListener("change", this.uploadVideo);
    },
    methods: {
        formatTime: formatTime,
        //点击上传视频
        selectVideo() {
            this.accept = "*";
            setTimeout(() => {
                this.$refs.videoInput.click();
            }, 200);
        },

        //点击上传字体
        upLoadFont() {
            this.accept = "*, .ttf";
            setTimeout(() => {
                this.$refs.videoInput.click();
            }, 200);
        },

        //上传贴图
        upLoadImage() {
            this.accept = "*, image/*";
            setTimeout(() => {
                this.$refs.videoInput.click();
            }, 200);
        },

        //上传字幕
        upLoadSubTitle() {
            this.accept = "*, .srt, .ass";
            setTimeout(() => {
                this.$refs.videoInput.click();
            }, 200);
        },

        //点击下载视频
        downloadVideo() {
            if (!this.obj.videoList[this.obj.videoSelected]) {
                alert("请先上传视频");
                return;
            }
            let link = document.createElement("a");
            link.href = this.obj.videoList[this.obj.videoSelected].videoUrl;
            link.download = new Date().toLocaleString() + ".mp4";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },

        //input上传时处理
        async uploadVideo(event) {
            console.log(111);

            const file = event.target.files[0];
            console.log(
                "🚀 ~ file: ControlComponent.vue:98 ~ uploadVideo ~ file:",
                file
            );

            //字体文件
            if (this.accept.includes(".ttf")) {
                await writeFontFile(file);
                this.obj.fontList.push(file.name);
                return;
            }

            //字幕文件
            if (this.accept.includes(".ass")) {
                await writeSubTitle(file);
                this.obj.subtitleList.push(file.name);
                return;
            }
            // this.changeVideo()

            const url = window.webkitURL.createObjectURL(file);

            if (this.accept.includes("image")) {
                await writeImage(file);
                this.obj.imageList.push({
                    url,
                });
                return;
            }
            this.$refs.videoInput.value = "";

            //ffmpeg加载视频
            try {
                await initVideo(file);
                const fileName = `video${this.obj.videoId++}`;
                const { url: coverUrl, videoInfo } = await getFirstFrame(
                    url,
                    fileName
                );
                this.obj.videoList.push({
                    videoUrl: url,
                    coverUrl,
                    fileName,
                    videoInfo,
                    playStatus: false,
                });
            } catch (error) {
                console.log("此视频：", error);
                alert("此视频无法进行编辑，可以进行观看体验");
                const url = URL.createObjectURL(
                    new Blob([file], { type: "video/mp4" })
                );
                this.obj.videoList.push({
                    videoUrl: url,
                    playStatus: false,
                });
            }
        },

        playOrPause() {
            if (!this.obj.videoList[this.obj.videoSelected]) {
                alert("请先上传视频");
                return;
            }
            if (this.obj.videoList[this.obj.videoSelected].playStatus) {
                this.$set(this.obj.videoList[this.obj.videoSelected], 'playStatus', false);   
            }else{
                this.$set(this.obj.videoList[this.obj.videoSelected], 'playStatus', true);
            }
        },

        fullScreen() {
            if (this.video.requestFullscreen) {
                this.video.requestFullscreen();
            }
        },

        handleClose(index) {
            this.obj.fontList.splice(index, 1);
        },

        changeVideo(index) {
            this.$set(this.obj.videoList[this.obj.videoSelected], 'playStatus', false);
            this.obj.videoSelected = index;
        },

        removeVideo(index) {
            this.obj.videoList.splice(index, 1);
            this.obj.videoSelected = index;
        },

        async postVideo() {
            let blob = await urlGetData(
                this.obj.videoList[this.obj.videoSelected].videoUrl
            );
            this.postDialog.data = blob;
            this.postDialog.show = true;
        },
    },
};
</script>


<style lang="less" scoped>
.control {
    height: 100%;
    padding: 10px;
}

.video-play {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 10px;
}

.font-list {
    height: 40px;
    flex: 1;
    display: flex;
    align-items: center;
}

.h-c-list {
    display: flex;
    margin: 10px 0;
    align-items: center;
}
i {
    font-size: 18px;
    cursor: pointer;
}
</style>
